<template>
    <div class="payPop" v-if="this.pay2Data">
        <div class="pay-close"><a @click="hiddenShare()"></a></div>
        <div class="pay-top">
            <div class="pay-img"><img :src="this.pay2Data.image ? this.pay2Data.image[0]:''" alt=""></div>
            <div class="pay-txt">
                <h3>{{pay2Data.name}}</h3>
                <div class="jiage">￥{{pay2Data.price}}</div>
                <p>{{pay2Data.detail}}</p>
            </div>
        </div>
        <br>
        <div class="pay-num">
            <div class="pay-num1">购买数量</div>
            <div class="pay-num2">
                <button @click="decrement">-</button>                
                <button>{{ buycount }}</button>
                <button @click="increment">+</button>
            </div>
        </div>
        <br>
        <br>
        <div class="pay-buy"><button @click="pay2(pay2Data.itemId,buycount)">立即购买</button></div>

        <!-- 支付方式组件 -->
        <mt-popup  v-model="popupZhifu" position="right" class="zhifucomponent" :modal="false">
            <Zhifu @closePay="closePay" :payPrice="this.payPrice" :balance="this.balance" @payEnter="payEnter"></Zhifu>
        </mt-popup>
        

    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import payWeiXin from '@/assets/js/payWeiXin'
import Zhifu from '@/components/Zhifu.vue'
export default {
    components:{
        Zhifu
    },
    props:{
        pay2Data:{
            type:Object,
            required:true,
            default:()=>{
                return {}
            }
        }
    },
    data(){
        return {
            successMessage:'支付成功，请在个人中心->套餐列表,查看和使用套餐。',
            errMessage:'余额不足，请选择其他支付方式',
            balance:0,
            itemId:'',
            buycount:1,
            index:0,
            popupZhifu:false
        }
    },
    computed:{
        payPrice(){
            return Number(this.buycount) * Number(this.pay2Data.price);
        }
    },
    methods:{
        closePay(){
            this.popupZhifu = false;
        },
        hiddenShare(){
            this.$emit("close2")
        },
        increment(){
            this.buycount++;
        },
        decrement() {
            this.buycount<=1 ? this.buycount : this.buycount--;
        },
        pay2(itemId){
            this.popupZhifu = true;
            this.itemId = itemId;
            //调用个人信息余额
            this.$newHttp.post('/userAccount/getUserInfo', {})
                .then(res => {                 
                    if(!res.data || res.data.accountType == 0){
                        this.$router.push('/register');
                    }
                    if(res.data){
                        this.balance = res.data.balance;
                    }      
                })
                .catch(err => { alert(err) });
            // let params = {
            //     itemId:itemId,
            //     payChannel:2,
            //     snsType:1,
            //     count:count
            // }
            // this.$newHttp.post('/cleanPay/buy',params)
            //     .then(res => {
            //         payWeiXin(res.data);
            //     })
            //     .catch(err => {console.log(err)});
        },
        payEnter(data){
            //调用微信支付、余额支付
            let params = {
                count:this.buycount,
                itemId:this.itemId,
                payChannel:data.payChannel,
                snsType:1
            }
            if(Number(data.payChannel) === 0){
                if(Number(data.balance)<Number(this.payPrice)){MessageBox.alert(this.errMessage,'提示');return;}
                this.$newHttp.post('/cleanPay/buy',params)
                .then(() => {
                    MessageBox.alert('支付成功，请在个人信息中查看。','提示').then(() => {
                        this.$router.push('/person');
                        // this.popupZhifu = false
                        // this.$emit("close2")
                    }) 
                })
                .catch(err => {console.log(err)});
            }else if(Number(data.payChannel) === 2){
                //微信支付
                this.$newHttp.post('/cleanPay/buy',params)
                .then(res => {
                    payWeiXin(res.data);
                })
                .catch(err => {console.log(err)});
            }else{
                MessageBox.alert('正在维护','提示').then(() => {
                    this.$router.go(-1);
                }) 
            }
            
            
            // MessageBox.alert(this.successMessage,'提示').then(() => {
            //     this.popupZhifu = false
            //     this.$emit("close2")
            // }) 
        }
    }
}
</script>

<style lang="scss">
@import "../assets/style/bjfw.scss";
.mint-msgbox-btn{
    font-size: 16px !important;
}
</style>


